@import "../../assets/css/mixin.scss";
@import "../../assets/css/base.scss";

.sun-header {
    position: relative;
    background-color: $header-bg;
    .sun-header-left {
        position: absolute;
        top: 45px;
        left: 40px;
        width: 70px;
        height: 70px;
        background-image: url("./ov.png");
        @include bg-full;
    }
    .sun-header-title {
        display: flex;
        justify-content: center;
        padding: 45px 290px;
        .sun-header-item {
            flex:0 0 33.333333%;
            height:70px;
            @include bg-full($s:cover);
            &.music {
                background-image: url("./t_actionbar_music_normal.png");
                &.active {
                    background-image: url("./t_actionbar_music_selected.png");
                }
            }
            &.discover {
                background-image: url("./t_actionbar_discover_normal.png");
                &.active {
                    background-image: url("./t_actionbar_discover_selected.png");
                }
            }
            &.video {
                background-image: url("./t_actionbar_video_normal.png");
                &.active {
                    background-image: url("./t_actionbar_music_selected.png");
                }
            }
        }
    }
    .sun-header-right {
        position: absolute;
        top: 45px;
        right: 33px;
        width: 70px;
        height: 70px;
        background-image: url("./pf.png");
        @include bg-full;
    }
}
